<template>
  <div class="flex items-center gap-1">
    <!-- 置顶按钮 -->
    <button
      class="flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
      :class="{ 'bg-accent text-accent-foreground': isAlwaysOnTop }"
      :title="isAlwaysOnTop ? t('window.unpin') : t('window.pin')"
      @click="handleToggleAlwaysOnTop">
      <i
        class="i-mdi-pin w-4 h-4 transition-all duration-200"
        :class="{ 'rotate-45 text-emerald-500': isAlwaysOnTop }" />
    </button>

    <!-- 最小化按钮 -->
    <button
      class="flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
      :title="t('window.minimize')"
      @click="handleMinimize">
      <i class="i-mdi-window-minimize w-4 h-4" />
    </button>

    <!-- 最大化/还原按钮 -->
    <button
      class="flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
      :title="isMaximized ? t('window.restore') : t('window.maximize')"
      @click="handleMaximize">
      <i :class="isMaximized ? 'i-mdi-window-restore' : 'i-mdi-window-maximize'" class="w-4 h-4" />
    </button>

    <!-- 关闭按钮 -->
    <button
      class="flex items-center justify-center w-8 h-8 rounded-md transition-colors hover:bg-destructive hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
      :title="t('window.close')"
      @click="handleClose">
      <i class="i-mdi-window-close w-4 h-4" />
    </button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import {
  closeWindow,
  isWindowAlwaysOnTop,
  isWindowMaximized,
  maximizeWindow,
  minimizeWindow,
  setWindowAlwaysOnTop
} from '@/api/system/app';
import { t } from '@/i18n';

const isMaximized = ref(false);
const isAlwaysOnTop = ref(false);

// 检查窗口状态
const checkWindowState = async () => {
  try {
    const isMaximizedResult = await isWindowMaximized();
    if (isMaximizedResult.success) {
      isMaximized.value = !!isMaximizedResult.data;
    }
    const isAlwaysOnTopResult = await isWindowAlwaysOnTop();
    if (isAlwaysOnTopResult.success) {
      isAlwaysOnTop.value = !!isAlwaysOnTopResult.data;
    }
  } catch (error) {
    console.error('Failed to check window state:', error);
  }
};

// 最小化窗口
const handleMinimize = async () => {
  try {
    await minimizeWindow();
  } catch (error) {
    console.error('Failed to minimize window:', error);
  }
};

// 最大化/还原窗口
const handleMaximize = async () => {
  try {
    await maximizeWindow();
    // 切换状态后重新检查
    setTimeout(checkWindowState, 100);
  } catch (error) {
    console.error('Failed to maximize window:', error);
  }
};

// 关闭窗口
const handleClose = async () => {
  try {
    await closeWindow();
  } catch (error) {
    console.error('Failed to close window:', error);
  }
};

// 切换置顶状态
const handleToggleAlwaysOnTop = async () => {
  try {
    const newState = !isAlwaysOnTop.value;
    await setWindowAlwaysOnTop(newState);
    isAlwaysOnTop.value = newState;
  } catch (error) {
    console.error('Failed to toggle always on top:', error);
  }
};

// 组件挂载时检查窗口状态
onMounted(() => {
  checkWindowState();
});
</script>

<style lang="scss" scoped></style>
